<template class="abc">
	<div class="back">
    <div class="container" >
  	<router-link :to="item.path" v-for="item in de" :key="item.id" class="grid-item">
  	  <div class="box"  >
  		  <img :src="item.img"  style="width:500px ; height:500px"/>
  		  <p>{{item.name}}</p>
  	  </div>
		</router-link>  
    </div>
	</div>
</template>

<script setup>
import { ref } from 'vue';

	const de = ref([
		{
			id: 1,
			name: "生",
			img: "/public/sheng.jpg",
			// dizhi: "非遗文创陶瓷娃娃-￥199",
			path: "/home/sheng/",
		},
		{
			id: 2,
			name: "旦",
			img: "/public/dan.jpg",
			// dizhi: "京剧变卦周边-￥99",
			path:"/home/dan/"
		},
		{
			id: 3,
			name: "净",
			img: "/public/jing.jpg",
			// dizhi: "京剧|凤栖楚地-￥99",
			path:"/home/jing/"
		},
		{
			id: 4,
			name: "末",
			img: "/public/mo.jpg",
			// dizhi: "京剧|熊猫娃娃周边-￥299",
			path:"/home/mo/"
		},
		])
</script>
<style scoped>
.text{text-align: center;}
.box{
    text-align: center; 
}
.back{
	background: url(/public/beijing.webp) no-repeat center center fixed;
	background-size: cover;
}
</style>

